<script lang="ts" context="module">
  import type { Option, RadioContext } from "./conf"
  function isString (opt: Option): opt is string {
    if (typeof opt === "string") {
      return true
    }
    return false;
  }
</script>
<script lang="ts">
  import { getContext } from 'svelte';
  export let opt: Option;
  export let disabled: boolean = false;
  const { name, activeRadioValue$, addRadio } = getContext<RadioContext>('radio-list')
  const index = addRadio(opt)
  $: label = isString(opt)? opt : opt.label;
  $: value = isString(opt)? opt : opt.value ?? opt.label;
</script>
<label>
	<input type="radio" class:rb-disabled={disabled} {disabled} name={name+'_'+index} bind:group={$activeRadioValue$} on:click={() => {activeRadioValue$.set(value)}} {value} />
	{label}
</label>
<style lang="postcss">
  .rb-disabled {
    @apply cursor-not-allowed;
  }
</style>
